<template>
  <div>
    <el-input
        placeholder="请输入部门名称进行搜索..."
        prefix-icon="el-icon-search"
        v-model="filterText">
    </el-input>
    <div>
      <el-tree
          :data="deps"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree">
        <span class="custom-tree-node" style="display: flex;justify-content: space-between;width: 100%;"
                  slot-scope="{ node, data }">
          <span>{{data.name }}</span>
          <span>
            <el-button
                type="primary"
                size="mini"
                class="depBtn"
                @click="() => showAddDepView(data)">
              添加部门
            </el-button>
            <el-button
                type="danger"
                size="mini"
                class="depBtn"
                @click="() => deleteDep(data)">
              删除部门
            </el-button>
          </span>
        </span>
      </el-tree>
      <el-dialog
          title="添加部门"
          :visible.sync="dialogVisible"
          width="30%">
        <div>
          <table>
            <tr>
              <td>
                <el-tag>上级部门</el-tag>
              </td>
              <td>{{pname}}</td>
            </tr>
            <tr>
              <td>
                <el-tag>部门名称</el-tag>
              </td>
              <td>
                <el-input v-model="dep.name" placeholder="请输入部门名称..."></el-input>
              </td>
            </tr>
          </table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doAddDep">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getRequest} from "../../../utils/api";
import {postRequest} from "../../../utils/api";
import {putRequest} from "../../../utils/api";
import {deleteRequest} from "../../../utils/api";

export default {
  name: "DepMana",
  data(){
    return{
      dialogVisible: false,
      filterText: '',
      deps: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      pname:'',
      dep:{
        name:'',
        parentId:-1
      }
    }
  },
  mounted() {
    this.initDeps();
  },
  methods:{
    deleteDep(data){
      deleteRequest("/system/basic/department/"+data.id).then(res=>{
        if(res){
          this.initDeps();
        }
      })
    },
    doAddDep(){
      postRequest("/system/basic/department/",this.dep).then(res=>{
        if(res){
          this.dep = {};
          this.dialogVisible = false;
          this.initDeps();
        }
      })
    },
    showAddDepView(data){
      console.log(data);
      this.pname=data.name;
      this.dep.parentid = data.id;
      this.dialogVisible = true;
    },
    initDeps() {
      getRequest("/system/basic/department/").then(resp => {
        if (resp) {
          this.deps = resp;
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },


  },
}
</script>

<style >
.depBtn {
  padding: 2px;
}
</style>